<template>
  <div class="table-box">
    <div class="card table-search">
      <el-form ref="formRef" :model="searchParam">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="在线状态：">
              <el-select v-model="searchParam.state_list" @change="search">
                <el-option v-for="(item, index) of statusData" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号分组：">
              <el-select v-model="searchParam.group_list" @change="search">
                <el-option v-for="(item, index) of accountData" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号类别：">
              <el-select v-model="searchParam.type_list" @change="search">
                <el-option v-for="(item, index) of accountType" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="card table-main">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="accountState" label="在线状态" align="center" />
        <el-table-column prop="accountName" label="账号昵称" align="center" />
        <el-table-column prop="phoneGroup" label="组别名称" align="center" />
        <el-table-column prop="phoneName" label="所在云手机名称" align="center" />
        <el-table-column prop="mmId" label="微信id" align="center" />
        <el-table-column prop="accountType" label="账号类型" align="center" />
        <el-table-column type="expand" label="消息" align="center" width="60">
          <template #default="scope">
            <el-table :data="scope.row.messageList" border>
              <el-table-column prop="sender" label="消息发送者" align="center" />
              <el-table-column prop="message" label="消息内容" align="center" />
              <el-table-column prop="messageType" label="消息类型" align="center" />
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope1">
                  <el-button
                    type="primary"
                    size="small"
                    @click="readMessage(scope.row.accountId, scope1.row.messageId)"
                    :icon="Pointer"
                  >
                    设置已读
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="success" size="small" :icon="Reading" @click="reply(scope.row)" :disabled="!scope.row.newMessage">
              回复
            </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-model:current-page="query.page"
        v-model:page-size="query.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="远程链接"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div style="width: 100%; height: 65vh">
        <iframe style="width: 100%; height: 100%; border: none" :src="phoneUrl" v-if="dialogVisible" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="messageWarn">
import { ref } from "vue";
import { Pointer, Reading } from "@element-plus/icons-vue";
import {
  getAccountGroupsApi,
  getAccountListApi,
  getAccountStatesApi,
  getAccountTypesApi,
  getPhoneUrlApi,
  readMessageApi,
  refreshPhoneApi
} from "@/api/modules/business";
import { AccountList } from "@/api/interface";
import { ElMessage } from "element-plus";

const formRef = ref<any>();
const searchParam = ref({
  state_list: "全部",
  group_list: "全部",
  type_list: "全部"
});
const statusData = ref<{ name: string }[]>([]);
const accountData = ref<{ name: string }[]>([]);
const accountType = ref<{ name: string }[]>([]);
const tableData = ref<AccountList[]>([]);
const total = ref(10);
const query = ref({ page: 1, size: 10 });
const dialogVisible = ref(false);
const phoneUrl = ref("");
const timer = ref<any>();

function search() {
  console.log(searchParam.value);
  query.value.page = 1;
  getAccountData();
}

async function readMessage(accountId: string, messageId: string) {
  console.log(accountId, messageId);
  const data = await readMessageApi({ accountId, messageId, all: true });
  console.log("read--", data);
  if (data.result) {
    ElMessage.success(data.message || "设置成功");
    await getAccountData();
  }
}

async function reply(row: Record<string, any>) {
  const data = await getPhoneUrlApi(row.accountId);
  phoneUrl.value = data.url || "";
  dialogVisible.value = true;
  initRefresh(row.accountId);
  await getAccountData();
}

function initRefresh(accountId: string) {
  return;
  timer.value = setInterval(async () => {
    const data = await refreshPhoneApi(accountId);
    if (!data.result) clearInterval(timer.value);
  }, 1000);
}

function handleClose() {
  dialogVisible.value = false;
  clearInterval(timer.value);
}

async function getAccountTypes() {
  const data = await getAccountTypesApi();
  accountType.value = data.typeList.map(item => {
    return { name: item };
  });
}

async function getAccountGroups() {
  const data = await getAccountGroupsApi();
  accountData.value = data.groupList.map(item => {
    return { name: item };
  });
}

async function getAccountStates() {
  const data = await getAccountStatesApi();
  statusData.value = data.stateList.map(item => {
    return { name: item };
  });
}

async function getAccountData() {
  const data = await getAccountListApi({
    ...query.value,
    with_messages: true,
    ...searchParam.value
  });
  tableData.value = data.data || [];
  total.value = data.total || 0;
}

function handleSizeChange(num: number) {
  query.value.page = 1;
  query.value.size = num;
  getAccountData();
}

function handleCurrentChange(num: number) {
  query.value.page = num;
  getAccountData();
}

getAccountTypes();
getAccountGroups();
getAccountStates();
getAccountData();
</script>
